$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'bdbusiness/anm/list',
        datatype: "json",
        colModel: [			
			{ label: 'cityId', name: 'cityId', index: 'city_id', width: 50, key: true ,hidden: true},
			{ label: '城市名称', name: 'cityName', index: 'city_name', width: 80 }, 			
			{ label: '是否省会城市', name: 'isShenghui', index: 'is_shenghui', width: 80,
				edittype: 'select',
                formatter: 'select',
                editoptions: {value: '0:否;1:是'}
			}, 					
			{ label: '是否旅游城市', name: 'isTourCity', index: 'is_tour_city', width: 80,
				edittype: 'select',
                formatter: 'select',
                editoptions: {value: '0:否;1:是'}
			}, 	
			{ label: '需求数', name: 'xqNum', index: 'xq_num', width: 80 }, 			
			{ label: '政策数', name: 'zcNum', index: 'zc_num', width: 80 }, 			
			{ label: '开发区数', name: 'kfqNum', index: 'kfq_num', width: 80 }, 			
			{ label: '绿化率', name: 'lhl', index: 'lhl', width: 80,
                formatter: function (value, options, row) {
                    return value+'%';
                }
			}, 			
//			{ label: '经度', name: 'longitude', index: 'longitude', width: 80 }, 			
//			{ label: '纬度', name: 'latitude', index: 'latitude', width: 80 }, 			
//			{ label: '由经纬度计算出的相对距离', name: 'distance', index: 'distance', width: 80 },
        ],
		viewrecords: true,
        height: 385,
        rowNum: 10,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });

    vm.showGraph();
});

var vm = new Vue({
	el:'#rrapp',
	data:{
		showList: true,
		title: null,
		q:{
			cityName: '',
			isShenghui: '',
			isTourCity: '',
        },
		aNm: {}
	},
	methods: {
		query: function () {
            $("#jqGrid").setGridParam({
            	'page': 1,
            });
			vm.reload();
		},
		details: function (event) {
			var id = getSelectedRow();
			if(id == null){
				return ;
			}
			vm.showList = false;
            vm.title = "详情";
            vm.getInfo(id)
		},
		getInfo: function(cityId){
			$.get(baseURL + "bdbusiness/anm/info/"+cityId, function(r){
                vm.aNm = r.aNm;
            });
		},
		showGraph: function(){
			var myChart = echarts.init(document.getElementById('showGraph'));
		    var option = {
		    	    title: {
		    	        text: '数据流'
		    	    },
		    	    tooltip: {},
		    	    animationDurationUpdate: 1500,
		    	    animationEasingUpdate: 'quinticInOut',
		    	    series : [
		    	        {
		    	            type: 'graph',
		    	            layout: 'none',
		    	            symbolSize: 50,
		    	            roam:false,
		    	            label: {
		    	                normal: {
		    	                    show: true
		    	                }
		    	            },
		    	            edgeSymbol: ['circle', 'arrow'],
		    	            edgeSymbolSize: [4, 10],
		    	            edgeLabel: {
		    	                normal: {
		    	                    textStyle: {
		    	                        fontSize: 20
		    	                    }
		    	                }
		    	            },
		    	            data: [{
		    	                name: 'Start',
		    	                x: 50,
		    	                y: 200
		    	            }, {
		    	                name: 'A',
		    	                x: 200,
		    	                y: 200
		    	            }, {
		    	                name: 'B',
		    	                x: 400,
		    	                y: 100
		    	            }, {
		    	                name: 'C',
		    	                x: 400,
		    	                y: 300
		    	            }, {
		    	                name: 'D',
		    	                x: 600,
		    	                y: 200
		    	            }, {
		    	                name: 'End',
		    	                x: 800,
		    	                y: 200
		    	            }],
		    	            links: [{
		    	                source: 'Start',
		    	                target: 'A'
		    	            },{
		    	                source: 'A',
		    	                target: 'B'
		    	            }, {
		    	                source: 'A',
		    	                target: 'C'
		    	            }, {
		    	                source: 'B',
		    	                target: 'D'
		    	            }, {
		    	                source: 'C',
		    	                target: 'D'
		    	            }, {
		    	                source: 'D',
		    	                target: 'End'
		    	            }],
		    	            lineStyle: {
		    	                normal: {
		    	                    opacity: 0.9,
		    	                    width: 2,
		    	                    curveness: 0
		    	                }
		    	            }
		    	        }
		    	    ]
		    	};

	        myChart.setOption(option);
		},
		reload: function (event) {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{ 
                postData: vm.q,
                page:page,
            }).trigger("reloadGrid");
		}
	}
});